import React, { memo, useState } from "react";
import { AskChildMomentDetailWrapper } from "./style";
import { useHistory } from "react-router-dom";
import { Avatar, Tooltip, Button, Image, message } from "antd";
import moment from "moment";
import { isToken } from "@/hooks";
import { PlusOutlined } from "@ant-design/icons";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import Comment from "../comment";
import {
  setMommentLove,
  setMommentComment,
  getMommentComment,
} from "@/service/discover";
export default memo(function AskChildMommentDetail(props) {
  const { item, refresh, aid,uid } = props;
  const history = useHistory();

  let { userDetail } = useSelector(
    (state) => ({
      userDetail: state.getIn(["public", "userDetail"]),
    }),
    shallowEqual
  );

  const likeClick = async (article_id, islike) => {
    let token = await isToken();
    if (!token) {
      history.push("/login");
      return;
    }

    let obj = {
      article_id,
      islike,
      user_id: item.user_id,
    };
    setMommentLove(obj).then((res) => {
      refresh();
      if (res.data.code) {
        message.warning("取消点赞或点踩!");
      } else {
        message.success("操作成功!");
      }
    });
  };

  return (
    <AskChildMomentDetailWrapper>
      <div className="top">
        <div className="name-info">
          <Avatar size={52} src={item.avatar} />
          <div className="name">
            <div className="uname">{item.user_name}</div>
            <div className="time">
              <Tooltip
                title={moment(item.createAt).format("YYYY-MM-DD HH:mm:ss")}
              >
                <span>{moment(item.createAt).fromNow()}</span>
              </Tooltip>
            </div>
          </div>
        </div>
        <div className="attention">
          <Button icon={<PlusOutlined />} type="primary">
            关注
          </Button>
        </div>
      </div>

      <div className="bottom">
        <div
          className="b-content"
          dangerouslySetInnerHTML={{ __html: item.content }}
        ></div>

        <div className="imgs-box">
          <Image.PreviewGroup>
            {item.filepath &&
              item.filepath.map((item) => {
                return <Image key={item} width={205} height={144} src={item} />;
              })}
          </Image.PreviewGroup>
        </div>

        <div className="like">
          <div onClick={() => likeClick(item.id, true)}>
            <i className="iconfont icon-dianzan"></i>
            <span> {item.love_num}</span>
          </div>
          <div>
            <i className="iconfont icon-pinglun"></i>
            <span>{item.comment_num}</span>
          </div>
          <div onClick={() => likeClick(item.id, false)}>
            <i className="iconfont icon-dislike"></i>
            <span>{item.hate_num}</span>
          </div>
        </div>

        <div className="comments">
          <Comment  refresh={ refresh} comment_num={item.comment_num} uid={uid} aid={aid} userDetail={userDetail}></Comment>
        </div>
      </div>
    </AskChildMomentDetailWrapper>
  );
});
